<template>
  <div class="activity-list-container">
    <el-container class="content-wrapper">
      <el-aside style="width: 20%; margin-top: 20px">
        <div class="activity-search">
          <el-form :model="queryRequest" ref="searchFormRef">
            <el-form-item label="活动编号" prop="activityId">
              <el-input
                v-model="queryRequest.id"
                placeholder="请输入活动编号"
              />
            </el-form-item>
            <el-form-item label="活动名称" prop="activityName">
              <el-input
                v-model="queryRequest.activityName"
                placeholder="请输入活动名称"
              />
            </el-form-item>
            <el-form-item label="活动状态" prop="status">
              <el-select
                v-model="queryRequest.status"
                placeholder="请选择活动状态"
              >
                <el-option label="全部" value="" />
                <el-option label="确认举办" value="1" />
                <el-option label="进行中" value="2" />
                <el-option label="已结束" value="3" />
                <el-option label="已取消" value="4" />
              </el-select>
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-aside>

      <el-main style="width: 80%">
        <div class="activity-list">
          <el-table
            :data="paginatedActivityList"
            stripe
            style="width: 100%"
            size="large"
          >
            <el-table-column prop="id" label="活动编号" />
            <el-table-column prop="activityName" label="活动名称" width="180" />
            <el-table-column prop="status" label="活动状态">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{
                  row.status
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" sortable />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column width="100">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleDetails(scope.row.id)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="queryRequest.current"
              v-model:page-size="queryRequest.pageSize"
              :total="totalItems"
              @current-change="handlePageChange"
              layout="total, prev, pager, next"
              class="mt-4"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { ActivityControllerService } from "../../../../generated";
import type { ActivityQueryRequest } from "../../../../generated";
import type { ActivityVO } from "../../../../generated";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

interface ActivityInfo {
  id: number;
  activityName: string;
  status: string;
  startTime: string;
  endTime: string;
}

const totalItems = ref(0);
const activityList = ref<ActivityInfo[]>([]);
const queryRequest = ref<ActivityQueryRequest>({
  pageSize: 10,
  current: 1,
});

const loadData = async () => {
  const res = await ActivityControllerService.listActivityVoByPage(
    queryRequest.value,
  );
  if (res.code === 0) {
    const activityVOList = res.data?.records as ActivityVO[];
    activityList.value = activityVOList.map(
      (activityVO) =>
        ({
          id: activityVO.id,
          activityName: activityVO.activityName,
          status: activityVO.status,
          startTime: activityVO.startTime,
          endTime: activityVO.endTime,
        }) as ActivityInfo,
    );
    totalItems.value = activityList.value.length;
  } else {
    ElMessage.error("数据加载错误，请重试: " + res.message);
  }
};

// 处理数据分页
const paginatedActivityList = computed(() => {
  return activityList.value;
});

onMounted(() => {
  loadData();
});

const handleSearch = () => {
  queryRequest.value.current = 1;
  loadData();
};

const handleReset = () => {
  queryRequest.value = {
    pageSize: 10,
    current: 1,
  };
  loadData();
};

const handlePageChange = (page: number) => {
  queryRequest.value.current = page;
  loadData();
};

const router = useRouter();
const handleDetails = (activityId: number) => {
  router.push({
    path: "/activity/details",
    query: { activityId: activityId },
  });
};

// 获取状态对应的标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case "待审核":
      return "info";
    case "确认举办":
      return "warning";
    case "进行中":
      return "success";
    case "已结束":
      return "";
    case "已取消":
      return "danger";
    default:
      return "info";
  }
};
</script>

<style scoped lang="scss">
.activity-list-container {
  padding: 20px;
}

.content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden;
}

.el-aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}

.activity-search {
  height: 100%;
}

.activity-search .el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.activity-search .button-group {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.activity-search .button-group .el-button {
  margin-left: 10px;
}

.el-main {
  padding: 20px;
}

.activity-list {
  margin-top: 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-pagination {
  margin-top: 0;
}
</style>
